<template>
    <klWaterMark text="仅作学习使用" :fontSize="30">
        <bn_header></bn_header>
        <div class="bn-grid-list p-t-90">
            <bn_item v-for="item in list" :key="item" :row="item"></bn_item>
        </div>
    </klWaterMark>
</template>

<script>
export default {
    components: {
        klWaterMark: () => import('@/components/klWaterMark/index.vue'),
        bn_item: () => import('@/views/biographical_notes/components/bn_item.vue'),
        bn_header: () => import('@/views/biographical_notes/components/bn_header.vue'),
    },
    data() {
        return {
            list: [],
        }
    },
    created() {
        this.$apis.get_bn_moban_list().then((res) => {
            this.list = res.data.list
        })
    },
    methods: {},
}
</script>

<style lang="scss" scoped>
.bn-grid-list {
    width: 100vw;
    min-height: 100vh;
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-gap: 10px;
}
</style>
